<template>
    <div class="zy-content">
        <back-level @click="close"/>
        <div class="searchBox search-box-layout">
            <Row :gutter="24">
                <Col span="4">
                    <div>
                        <p class="label">{{ $t('流程单号') }}</p>
                        <div class="ipt">
                            <Input clearable type="text" v-model="params.capexNo"
                                   :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                                   :maxlength="32"></Input>
                        </div>
                    </div>
                </Col>
                <Col span="4">
                    <div>
                        <p class="label">{{ $t('项目ID') }}</p>
                        <div class="ipt">
                            <Input clearable type="text" v-model="params.projectId"
                                   :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                                   :maxlength="32"></Input>
                        </div>
                    </div>
                </Col>
                <Col span="4">
                    <div>
                        <p class="label">{{ $t('资产编号') }}</p>
                        <div class="ipt">
                            <Input clearable type="text" v-model="params.assetNo"
                                   :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                                   :maxlength="32"></Input>
                        </div>
                    </div>
                </Col>
                <Col span="4">
                    <div>
                        <p class="label">{{ $t('项目负责人') }}</p>
                        <div class="ipt">
                            <!--                            <Input clearable type="text" v-model="params.responsible"-->
                            <!--                                   :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"-->
                            <!--                                   :maxlength="32"></Input>-->
                            <Select v-model="params.responsible" filterable clearable
                                    :placeholder="$t('common.inputInfo')"
                                    :remote-method="handleRemote"
                            >
                                <Option v-for="(item, i) in userList"
                                        :value="item.id"
                                        :label="item.realname+'-'+item.empno"
                                        :key="i">
                                </Option>
                            </Select>
                        </div>
                    </div>
                </Col>
                <Col span="4">
                    <div>
                        <p class="label">{{ $t('状态') }}</p>
                        <div class="ipt">
                            <Select
                                v-model="params.orderProcessStatus"
                                filterable
                                clearable
                                :placeholder="`${$t('common.selectInfo')}`"
                                class="Input-wrapper"
                            >
                                <Option v-for="(item,index) of statusList"
                                        :value="item.value"
                                        :key="index"
                                        :label="item.label">
                                </Option>
                            </Select>
                        </div>
                    </div>
                </Col>
                <Col span="4">
                    <div>
                        <p class="label hide-label">--</p>
                        <div class="ipt">
                            <Button type="primary" v-has="'capex_search'" class="search-btn" @click="search">{{$t('common.Query')}}
                            </Button>
                            <Button class="reset-btn" v-has="'capex_search'" @click="reset">{{$t('common.reset') }}
                            </Button>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="list-layout mt16">
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <!--        <Button @click="addHandle" v-has="'capex_add'">-->
                <!--          {{ $t("新增") }}-->
                <!--        </Button>-->
                <Button @click="exportFile" v-has="'capex_export'">
                    {{ $t("导出") }}
                </Button>
                <Button @click="getTableColumns(columns)">{{handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏')}}
                </Button>
            </div>
            <div class="tableContent">
                <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" ellipsis
                       ref="selection" :columns="columnsList" :data="dataSource"
                       @on-selection-change="handleSelectionChange">
                    <template slot-scope="{ row }" slot="action">
                          <span v-has="'capex_delete'" class="operationBtn" @click="deleteHandle(row)">
                             <i class="iconfont zy-common-shanchu"></i>
                            {{ $t('删除') }}
                        </span>
                        <span v-has="'capex_view'" class="operationBtn" @click="viewHandle(row)">
                             <i class="iconfont zy-common-chakan"></i>
                            {{ $t('查看') }}
                        </span>
                    </template>
                    <template slot-scope="{ row }" slot="progressCode">
                        <ul class="process-list" >
                            <li :class="{left: item.status === 1,center: item.status === 2,right: item.status === 3}"
                                v-for="(item,index) in row.processList" :key="index">
                                <Tooltip placement="top" :transfer="true" :content="item.name">
                                    <i class="iconfont" :class="item.icon"></i>
                                </Tooltip>
                            </li>
                        </ul>
                    </template>
                    <template slot-scope="{ row }" slot="orderProcessStatus">
            <span
                :class="{closed:row.orderProcessStatus == 1,onGoing:row.orderProcessStatus == 0,}"></span>{{
                            row.orderProcessStatusName
                        }}
                    </template>
                </Table>
            </div>
            <div class="pageWrap mt16">
                <pageLeftTitle :total="total"/>
                <Page :total="total" :page-size="params.pageSize" :current="params.pageNum"
                      @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
            </div>
        </div>

        <Modal :mask-closable="false" class="modal-title-layout" v-model="delFaultCodeShowF" :title="`${$t('maintenance.Deleteremind')}`">
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t('common.sureDelete') }}</span>
            </p>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="onDeleteHandle">{{ $t('maintenance.Confirmed') }}
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import mixins from './components/mixins'
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";

export default {
    name: "index",
    mixins: [mixins, toggleTableOperation],
    data() {
        return {
            delFaultCodeShowF:false,
            params: {
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            dataSource: [],
            columns: [
                // {
                //   type: 'selection',
                //   align: 'center',
                //   fixed: 'left'
                // },
                {
                    title: this.$t('流程单号'),
                    align: 'center',
                    tooltip: true,
                    key: "capexNo",
                    width: 150,
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('项目ID'),
                    align: 'center',
                    tooltip: true,
                    key: "projectId",
                    width: 150,
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('资产编号'),
                    align: 'center',
                    tooltip: true,
                    key: "assetNo",
                    width: 150,
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('项目负责人'),
                    align: 'center',
                    tooltip: true,
                    key: "projectOwnerStr",
                    width: 150,
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('项目名称'),
                    align: 'center',
                    tooltip: true,
                    key: "projectName",
                    width: 150,
                    resizable: true,tooltip: true,
                },
                {
                    title: 'OPM',
                    align: 'center',
                    tooltip: true,
                    key: "factoryOwnerName",
                    width: 150,
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('状态'),
                    align: 'center',
                    tooltip: true,
                    key: "orderProcessStatusName",
                    width: 150,
                    slot: "orderProcessStatus",
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('预算范围'),
                    align: 'center',
                    tooltip: true,
                    key: "budgetReachStr",
                    width: 260,
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('项目类型'),
                    align: 'center',
                    tooltip: true,
                    key: "projectTypeListName",
                    width: 150,
                    resizable: true,tooltip: true,
                },
                {
                    title: this.$t('流程'),
                    align: 'center',
                    tooltip: true,
                    key: "progressCode",
                    width: 600,
                    slot: "progressCode",
                    resizable: true
                },
                {
                    title: this.$t('预算层级金额'),
                    align: 'center',
                    tooltip: true,
                    key: "crovBdgWobdg",
                    width: 220,
                    resizable: true
                },
                {
                    title: this.$t('实际批复'),
                    align: 'center',
                    tooltip: true,
                    key: "actualTotalApproved",
                    width: 180,
                    resizable: true
                },
                {
                    title: this.$t('已拨款'),
                    align: 'center',
                    tooltip: true,
                    key: "paid",
                    width: 150,
                    resizable: true
                },
                {
                    title: this.$t('预算余额'),
                    align: 'center',
                    tooltip: true,
                    key: "budgetAvailability",
                    width: 150,
                    resizable: true
                },
                {
                    title: this.$t('操作'),
                    slot: "action",
                    minWidth: 200,
                    align: "center",
                    fixed: 'right'
                }
            ],
            ids: [],
            userList: [],
            activeItem:{}
        }
    },
    created() {
        this.getTableColumnsWidth(this.columns)
    },
    mounted() {
        this.search()
    },
    methods: {
        close() {
            this.$router.go(-1)
        },
        handleRemote(query) {
            if (query !== "") {
                return this.axios({
                    method: "get",
                    url: "/dms/user/userList",
                    params: {
                        key: query
                    },
                }).then((res) => {
                    if (res.code === 200) {
                        this.userList = res.data
                    } else {
                        this.$Message.warning({
                            content: res.msg,
                            duration: 6,
                            closable: true,
                        });
                    }
                })
            } else {
                this.numberList = [];
            }
        },
        addHandle() {
            this.$router.push({
                path: '/devBasic/capexOperation',
                query: {
                    type: "add"
                }
            })
        },
        exportFile() {
            let params = this.params;
            this.axios({
                method: 'post',
                url: '/dms/capex/portalStatisticsExport',
                responseType: 'blob',
                data: {
                    ...params,
                    projentType: this.$route.query.projentType,
                    projentStatusType: this.$route.query.projentStatusType
                }
            }).then(res => {
                // if (res.code === 200) {
                fileDownload(res, "我的代办" + '.xlsx')
                // }
            })
        },
        viewHandle(row) {
            this.$router.push({
                path: '/devBasic/capexOperation',
                query: {
                    type: "view",
                    id: row.id,
                    mainIdTag: row.mainIdTag,
                    mainId: row.mainId
                }
            })
        },
        deleteHandle(item) {
            this.delFaultCodeShowF = true
            this.activeItem = item
        },
        onDeleteHandle(){
            this.axios({
                method: 'get',
                url: '/dms/capex/delMainItem',
                params: {
                    id:this.activeItem.id
                }
            }).then((res)=>{
                this.$Message.success(res.msg);
                this.delFaultCodeShowF = false
                this.getList()
            })
        },
        getList() {
            let params = this.params;
            this.axios({
                method: 'post',
                url: '/dms/capex/portalStatisticsList',
                // url: '/dms/capex/list',
                data: {
                    ...params,
                    projentType: this.$route.query.projentType,
                    projentStatusType: this.$route.query.projentStatusType
                }
            }).then(res => {
                if (res.code === 200) {
                    const {list, total} = res.data;
                    this.dataSource = list.map(item => {
                        const projectTyp = this.projectTypeList.find(m => m.value == item.projectType)
                        const orderProcessStatus = this.statusList.find(m => m.value == item.orderProcessStatus)
                        const obj = this.budgetList.find(m => m.value == item.budgetReach / 1)

                        const renderBySubItem = ["Spec. In","Bidding","Confirm Vendor"].includes(item.progressCode);

                        item.projectTypeListName = (projectTyp || {}).label;
                        item.orderProcessStatusName = (orderProcessStatus || {}).label;
                        if (obj)
                            item.budgetReachStr = obj['label']

                        let _processList = this.formatProcessList(item.progressCode, [], item.orderProcessStatus, item.satIsRequired, item.twoPaymentBeforeCat)
                        let activeCodeObj = _processList.find(processItem => processItem.key.includes(item.progressCode))

                        if (activeCodeObj) {
                            if (this.processList.indexOf(activeCodeObj) !== _processList.length - 1 && item.progressCode === activeCodeObj.key[activeCodeObj.key.length - 1] && item.progressCode !== 'Post Calculation') {
                                item.progressCode = _processList[_processList.indexOf(activeCodeObj) + 1].key[0]
                                _processList = this.formatProcessList(item.progressCode, [], item.orderProcessStatus, item.satIsRequired, item.twoPaymentBeforeCat)
                            }
                        }

                        let processList = []
                        const capexSubmitPos = item.capexSubmitPos;
                        const subProjectCode = []
                        // const defaultProcessList  = this.formatProcessList(item.progressCode, [], item.orderProcessStatus)

                        if (Array.isArray(capexSubmitPos) && capexSubmitPos.length > 0 && !renderBySubItem) {
                            const firstCapex = capexSubmitPos[0]
                            processList =  this.formatProcessList(firstCapex.progressCode, [], firstCapex.orderProcessStatus ,firstCapex.satIsRequired, firstCapex.twoPaymentBeforeCat)
                            for (let i = 0; i < capexSubmitPos.length; i++) {
                                const code = capexSubmitPos[i].progressCode
                                if (!code) {
                                    subProjectCode.push('Spec. Out')
                                } else {
                                    const subCodeObj = processList.find(subItem => subItem.key.includes(code))
                                    if (subCodeObj && subCodeObj.progressCode !== 'Capitalization Approval' && subCodeObj.key[subCodeObj.key.length - 1] === code) {
                                        const objProcess = processList[processList.indexOf(subCodeObj) + 1]


                                        subProjectCode.push(objProcess.key[0])
                                    } else {
                                        const objProcess = processList[processList.indexOf(subCodeObj)]


                                        subProjectCode.push(objProcess.key[0])
                                    }
                                }
                            }
                        }

                        let subProjectCodeIndex = 0
                        if (subProjectCode.length > 0 && !renderBySubItem)
                            item.processList = processList.map(m => {
                                if (item.orderProcessStatus === 1) {
                                    m.status = 1
                                } else {
                                    const arr = subProjectCode.filter(ms => m.key.includes(ms))
                                    // console.log(arr,subProjectCode,'arrarrarrarr')
                                    if (arr.length > 0) {
                                        for (let i = 0; i < arr.length; i++) {
                                            m.status = 2
                                            subProjectCodeIndex++
                                        }
                                        // console.log(subProjectCodeIndex,subProjectCode,'subProjectCodeIndex')
                                    }
                                    if (subProjectCodeIndex > 0 && subProjectCodeIndex < subProjectCode.length) {
                                        // console.log('subProjectCodeIndex > 0 && subProjectCodeIndex < subProjectCode.length')
                                        m.status = 2

                                    }
                                    if (subProjectCodeIndex === 0) {
                                        m.status = 1
                                    }
                                }
                                return m;
                            })
                        else
                            item.processList = _processList

                        const {crovBdgWobdg, actualTotalApproved, paid, budgetAvailability} = item;
                        item.crovBdgWobdg = this.util.thousandth(crovBdgWobdg)
                        item.actualTotalApproved = this.util.thousandth(actualTotalApproved)
                        item.paid = this.util.thousandth(paid)
                        item.budgetAvailability = this.util.thousandth(budgetAvailability)

                        return item;
                    })
                    this.total = total;
                }
            })
        },
        reset() {
            this.params = {
                pageNum: 1,
                pageSize: 20
            }
            this.getList()
        },
        search() {
            this.params.pageNum = 1
            this.getList()
        },
        changePageNum(val) {
            this.params.pageNum = val
            this.getList()
        },
        changePageSize(val) {
            this.params.pageSize = val
            this.getList()
        },
        handleSelectionChange() {

        }
    }
}
</script>

<style scoped lang="scss">
.process-list {
    text-align: left;
    padding-bottom: 1px;
    li {
        width: 25px;
        height: 25px;
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height: 25px;
        font-size: 15px;
        font-weight: bold;
        border: #035BEC solid 1px;
        color: #035BEC;
        margin-right: 10px;
        position: relative;
        text-align: center;
        line-height: 25px;

        i {
            text-align: center;
            line-height: 25px;
            color: #035BEC;
            padding-right: 0 !important;

        }

        &:before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 1px;
            position: absolute;
            top: 12px;
            left: 24px;
            background: #035BEC;
        }

        &:last-child {
            &:before {
                display: none;
            }
        }

        &.center {
            border: #00E6F4 solid 1px;
            color: #00E6F4;

            i {
                color: #00E6F4;
            }

            &:before {
                background: #00E6F4;
            }
        }

        &.right {
            border: rgba(51, 65, 100, 0.5) solid 1px;
            color: rgba(51, 65, 100, 0.5);

            i {
                color: rgba(51, 65, 100, 0.5);
            }

            &:before {
                background: rgba(51, 65, 100, 0.5);
            }
        }
    }
}

.closed {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: #cccccc;
    vertical-align: middle;
    margin-right: 5px;
}

.onGoing {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: green;
    vertical-align: middle;
    margin-right: 5px;
}
</style>
